<!DOCTYPE html>
<html lang="en">

	<head>
		<meta charset="utf-8">
		<meta name="viewport" content="width=device-width, initial-scale=1.0">
		<meta name="description" content="">
		<meta name="author" content="Mosaddek">
		<meta name="keyword" content="FlatLab, Dashboard, Bootstrap, Admin, Template, Theme, Responsive, Fluid, Retina">
		<link rel="shortcut icon" href="img/favicon.html">

		<title>车主列表</title>

		<!-- Bootstrap core CSS -->
		<link href="css/bootstrap.min.css" rel="stylesheet">
		<link href="css/bootstrap-reset.css" rel="stylesheet">
		<!--external css-->
		<link href="assets/font-awesome/css/font-awesome.css" rel="stylesheet" />
		<!-- Custom styles for this template -->
		<link href="css/style.css" rel="stylesheet">
		<link href="css/style-responsive.css" rel="stylesheet" />

		<!-- HTML5 shim and Respond.js IE8 support of HTML5 tooltipss and media queries -->
		<!--[if lt IE 9]>
      <script src="js/html5shiv.js"></script>
      <script src="js/respond.min.js"></script>
    <![endif]-->
	</head>

	<body>

		<section id="container" class="">
			<!--header start-->
			<header class="header white-bg">
				<div class="sidebar-toggle-box">
					<div data-original-title="" data-placement="right" class="icon-reorder tooltips"></div>
				</div>
				<!--logo start-->
				<a href="#" class="logo">车辆<span>管理系统</span></a>
				<!--logo end-->

				<div class="top-nav ">
					<ul class="nav pull-right top-menu">
						<li>
							<input type="text" class="form-control search" placeholder="Search">
						</li>
						<!-- user login dropdown start-->
						<li class="dropdown">
							<a data-toggle="dropdown" class="dropdown-toggle" href="#">
								<img alt="" src="img/avatar1_small.jpg">
								<span class="username">嘿嘿</span>
								<b class="caret"></b>
							</a>
							<ul class="dropdown-menu extended logout">
								<div class="log-arrow-up"></div>
								<li>
									<a href="#"><i class=" icon-suitcase"></i>个人资料</a>
								</li>
								<li>
									<a href="#"><i class="icon-cog"></i>设置</a>
								</li>
								<li>
									<a href="#"><i class="icon-bell-alt"></i> 通知</a>
								</li>
								<li>
									<a href="login.html"><i class="icon-key"></i> 退出</a>
								</li>
							</ul>
						</li>
						<!-- user login dropdown end -->
					</ul>
				</div>
			</header>
			<!--header end-->
			<!--sidebar start-->
			<aside>
				<div id="sidebar" class="nav-collapse ">
					<!-- sidebar menu start-->
					<ul class="sidebar-menu">
						<li class="">
							<a class="" href="index.html">
								<i class="icon-dashboard"></i>
								<span>首页</span>
							</a>
						</li>
						<li class="sub-menu">
							<a href="javascript:;" class="">
								<i class="icon-book"></i>
								<span>车辆基本信息管理</span>
								<span class="arrow"></span>
							</a>
							<ul class="sub">
								<li>
									<a class="" href="general.html">车辆列表</a>
								</li>
								<li>
									<a class="" href="buttons.html">新增车辆</a>
								</li>
							</ul>
						</li>
						<li class="sub-menu active">
							<a href="javascript:;" class="">
								<i class="icon-cogs"></i>
								<span>车主信息管理</span>
								<span class="arrow"></span>
							</a>
							<ul class="sub">
								<li class="active">
									<a class="" href="grids.html">车主列表</a>
								</li>
								<li>
									<a class="" href="calendar.html">新增车主</a>
								</li>
							</ul>
						</li>
						<li class="sub-menu">
							<a href="javascript:;" class="">
								<i class="icon-tasks"></i>
								<span>车辆管理费</span>
								<span class="arrow"></span>
							</a>
							<ul class="sub">
								<li>
									<a class="" href="form_component.html">费用列表</a>
								</li>
								<li>
									<a class="" href="form_wizard.html">收取管理费</a>
								</li>
							</ul>
						</li>
						<li class="sub-menu">
							<a href="javascript:;" class="">
								<i class="icon-th"></i>
								<span>车辆变更管理</span>
								<span class="arrow"></span>
							</a>
							<ul class="sub">
								<li>
									<a class="" href="basic_table.html">车辆变更列表</a>
								</li>
								<li>
									<a class="" href="dynamic_table.html">新增车辆变更</a>
								</li>
							</ul>
						</li>

						<li class="sub-menu">
							<a href="javascript:;" class="">
								<i class="icon-glass"></i>
								<span>系统管理</span>
								<span class="arrow"></span>
							</a>
							<ul class="sub">
								<li>
									<a class="" href="blank.html">用户管理</a>
								</li>
								<li>
									<a class="" href="profile.html">修改密码</a>
								</li>
								<li>
									<a class="" href="invoice.html">安全退出</a>
								</li>
							</ul>
						</li>
						<li>
							<a class="" href="login.html">
								<i class="icon-user"></i>
								<span>登录</span>
							</a>
						</li>
					</ul>
					<!-- sidebar menu end-->
				</div>
			</aside>
			<!--sidebar end-->
			<!--main content start-->
			<section id="main-content">
				<section class="wrapper">
					<!-- page start-->
					<div class="row">
						<div class="col-lg-12">
							<section class="panel">
								<header class="panel-heading">
									车主列表
								</header>
								<div class="panel-body bio-graph-info">
									<form role="form" class="form-horizontal">
										<div class="form-group">
											<label class="col-lg-1 control-label" for="carNumber">姓名</label>
											<div class="col-lg-2">
												<input type="text" class="form-control" id="carname" />
												<!--  -->
											</div>
											<label class="col-lg-1 control-label" for="carNumber">性别</label>
											<div class="col-lg-2">
												<select name="sample_1_length" aria-controls="sample_1" class="form-control" id="carsex">
													<option value="全部" selected="selected">全部</option>
													<option value="男">男</option>
													<option value="女">女</option>
												</select>
											</div>
											<label class="col-lg-1 control-label" for="carNumber">移动电话</label>
											<div class="col-lg-2">
												<input type="text" class="form-control" id="carphone" />
												<!--  -->
											</div>
										</div>
										<div class="form-group">
											<label class="col-lg-1 control-label" for="carNumber">出生日期</label>
											<div class="col-lg-2">
												<input type="text" class="form-control" id="startdate" value="1960-10-10" />
												<!--  -->
											</div>
											<label class="col-lg-1 control-label" for="carNumber">至</label>
											<div class="col-lg-2">
												<input type="text" class="form-control" id="enddate" value="2013-09-09" />
												<!--  -->
											</div>

											<div class="col-lg-5">
												<button class="btn btn-shadow btn-primary" onclick="querys();return false;">查询</button>
											</div>
										</div>
									</form>
								</div>
								<table class="table table-striped border-top" id="sample_1">
									<thead>
										<tr>
											<th style="width:8px;"><input type="checkbox" class="group-checkable" data-set="#sample_1 .checkboxes" /></th>
											<th>姓名</th>
											<th>性别</th>
											<th>出生日期</th>
											<th>移动电话</th>
											<th>备注信息</th>
											<th>操作</th>
										</tr>
									</thead>
									<tbody id="content">
										<!--  插入数据 -->
										<!-- <tr class="odd gradeX">
                                  <td><input type="checkbox" class="checkboxes" value="1" /></td>
                                  <td>张三</td>
                                  <td class="hidden-phone">男</td>
                                  <td class="hidden-phone">1994-03-01</td>
                                  <td class="hidden-phone">1111111111</td>
                                  <td class="hidden-phone">
                                    <button class="btn btn-success btn-xs"><i class="icon-ok"></i>
                                    </button>
                                    <button class="btn btn-primary btn-xs"><i class="icon-pencil"></i></button>
                                    <button class="btn btn-danger btn-xs"><i class="icon-trash "></i></button>
                                  </td>
                              </tr> -->
									</tbody>
								</table>
							</section>
						</div>
					</div>
					<!-- page end-->
				</section>
			</section>
			<!--main content end-->
		</section>

		<!-- js placed at the end of the document so the pages load faster -->
		<script src="js/jquery.js"></script>
		<script src="js/bootstrap.min.js"></script>
		<script src="js/jquery.scrollTo.min.js"></script>
		<script src="js/jquery.nicescroll.js" type="text/javascript"></script>
		<script type="text/javascript" src="assets/data-tables/jquery.dataTables.js"></script>
		<script type="text/javascript" src="assets/data-tables/DT_bootstrap.js"></script>

		<!--common script for all pages-->
		<script src="js/common-scripts.js"></script>
		<!--script for this page only-->
		<script src="js/dynamic-table.js"></script>
		<script src="js/Underscore.js"></script>
		
		<script src="js/json2.js"></script>
		<script type="text/javascript">
			function querys() {
				var name = $('#carname').val(),
					sex = $('#carsex').val(),
					phone = $('#carphone').val(),
					birthDayStart = $('#startdate').val(),
					birthDayEnd = $('#enddate').val();
				var datalist = {
					'name': name,
					'sex': sex,
					'phone': phone,
					'birthDayStart': birthDayStart,
					'birthDayEnd': birthDayEnd,
					'start': 0,
					'count': 10
				};
				var dd = JSON.stringify(datalist);
				$.ajax({
					url: 'caruser_querys.action', // 请求的地址
					type: 'POST',
					dataType: 'json',
					data: "data=" + dd,

					success: function(datas) {
						//alert(datas.data[0].id);
						if(datas.code == 0) {
							alert(datas.data);
							console.log('请求出错');
							return false;
						}
						//取出datas中包含的数组data并遍历取值
						var arr = datas.data;
						sessionStorage.setItem("carOwnerList", JSON.stringify(arr));
						var t = _.template($("#temp").html());
						$("#content").html(t(arr));
					}
				})
			}

			//删除对应用户
			function del() {
				var r=confirm("确定要从数据库中删除该记录？")			
					if(r){
						var data = JSON.parse(sessionStorage.getItem("carOwnerList"));
						var dataList = [];
						var j = 0;
						$("input:checkbox[name='box']:checked").each(function(i){				 		       
							   var i = $(this).val();							  
							   var id = data[i].id;
							   var temp = {"id":id};						   							   			       
							   dataList[j] = temp;
							   j=j+1;				       
						})
						var dd = JSON.stringify(dataList);
						//alert(dd);
					
					    $.ajax({
							url: 'caruser_delete.action',
							type: 'POST',
							dataType: 'json',
							data: "data=" + dd,

							success: function(data) {
								alert(data.data);
								console.log('success');
							},

							error: function(data) {
								alert(data.data);
							}
						}) 					 
					} 				
			} 
		</script>
		<script type="text/template" id="temp">
			<% _.each(obj, function (index,item) { %>
			<tr class="odd gradeX">
				<td><input type="checkbox" class="checkboxes" value="<%=item %>" name="box"/></td>
				<td class="hidden-phone">
					<%=index.name %>
				</td>
				<td class="hidden-phone">
					<%=index.sex %>
				</td>
				<td class="hidden-phone">
					<%=index.birthday %>
				</td>
				<td class="hidden-phone">
					<%=index.phone %>
				</td>
				<td class="hidden-phone">
					<%=index.common %>
				</td>
				<td class="hidden-phone">
					<button class="btn btn-primary btn-xs" ><a href="carOwnerMessageUpdate.html"><i class="icon-pencil"></i></a></button>
					<button class="btn btn-danger btn-xs" onclick="del();return false;"><i class="icon-trash "></i></button></td>
			</tr>
			<% }); %>
		</script>
	</body>

</html>